﻿<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Ether</title>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link href="../bootstrap-3.3.5/css/bootstrap.min.css" rel="stylesheet" />
    <script src="../js/jquery-1.12.3.min.js"></script>
    <script src="../bootstrap-3.3.5/js/bootstrap.min.js"></script>
</head>

<body>
<div class="vertical-center">
    <div class="container">
        <h5>Depth od bitcoin</h5>
        <button class="btn btn-primary">开始</button>
        <button class="btn btn-danger">停止</button>
        <table class="table" id="stockTable">
            <thead>
            <tr>
                <th>Okex</th>
                <th>Price</th>
                <th>Symbol</th>
            </tr>
            </thead>
            <tbody id="stockRows">
            <tr>
                <td>
                    <h5>ask5</h5></td>
                <td id="ask5_price">
                    <h5><span class="label label-danger">95.00</span></h5>
                </td>
                <td id="ask5_amount">
                    <h5><span class="label label-danger">95.00</span></h5>
                </td>
            </tr>
            <tr>
                <td>
                    <h5>ask4</h5></td>
                <td id="ask4_price">
                    <h5><span class="label label-danger">50.00</span></h5>
                </td>
                <td id="ask4_amount">
                    <h5><span class="label label-danger">50.00</span></h5>
                </td>
            </tr>
            <tr>
                <td>
                    <h5>ask3</h5></td>
                <td id="ask3_price">
                    <h5><span class="label label-danger">300.00</span></h5>
                </td>
                <td id="ask3_amount">
                    <h5><span class="label label-danger">50.00</span></h5>
                </td>
            </tr>
            <tr>
                <td>
                    <h5>ask2</h5></td>
                <td id="ask2_price">
                    <h5><span class="label label-danger">550.00</span></h5>
                </td>
                <td id="ask2_amount">
                    <h5><span class="label label-danger">550.00</span></h5>
                </td>
            </tr>
            <tr>
                <td>
                    <h5>ask1</h5></td>
                <td id="ask1_price">
                    <h5><span class="label label-danger">35.00</span></h5>
                </td>
                <td id="ask1_amount">
                    <h5><span class="label label-danger">550.00</span></h5>
                </td>
            </tr>
            <tr>
                <td>
                    <h5>bid1</h5></td>
                <td id="bid1_price">
                    <h5><span class="label label-success">95.00</span></h5>
                </td>
                <td id="bid1_amount">
                    <h5><span class="label label-success">95.00</span></h5>
                </td>
            </tr>
            <tr>
                <td>
                    <h5>bid2</h5></td>
                <td id="bid2_price">
                    <h5><span class="label label-success">50.00</span></h5>
                </td>
                <td id="bid2_amount">
                    <h5><span class="label label-success">50.00</span></h5>
                </td>
            </tr>
            <tr>
                <td>
                    <h5>bid3</h5></td>
                <td id="bid3_price">
                    <h5><span class="label label-success">300.00</span></h5>
                </td>
                <td id="bid3_amount">
                    <h5><span class="label label-success">50.00</span></h5>
                </td>
            </tr>
            <tr>
                <td>
                    <h5>bid4</h5></td>
                <td id="bid4_price">
                    <h5><span class="label label-success">550.00</span></h5>
                </td>
                <td id="ask4_amount">
                    <h5><span class="label label-success">550.00</span></h5>
                </td>
            </tr>
            <tr>
                <td>
                    <h5>bid5</h5></td>
                <td id="bid5_price">
                    <h5><span class="label label-success">35.00</span></h5>
                </td>
                <td id="ask5_amount">
                    <h5><span class="label label-success">550.00</span></h5>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
    <script>
    var ws = new WebSocket("ws://localhost:8808");
    var stock_request = { "cmd":"depth","data": { "subsribeTick":true} };
    var isClose = false;
	var uuid32 = "12345678901234567890123456789012";
    var asks = {
        "ask1": 0, "ask2": 0, "ask3": 0, "ask4": 0, "ask5": 0
    };
    function updataUI() {
        ws.onopen = function (e) {
            console.log('Connection to server opened');
            isClose = false;
            ws.send(uuid32 + JSON.stringify(stock_request));
            console.log("sened a mesg");
        }
        // UI update function
        var changeStockEntry = function (symbol, originalValue, newValue) {
            var valElem = $('#' + symbol + '_price' + ' span');
            valElem.html(newValue[0]);
            var valElem = $('#' + symbol + '_amount' + ' span');
            valElem.html(newValue[1]);
//            if (newValue < originalValue) {
//                valElem.addClass('label-danger');
//                valElem.removeClass('label-success');
//            } else if (newValue > originalValue) {
//                valElem.addClass('label-success');
//                valElem.removeClass('label-danger');
//            }
        }
        // WebSocket message handler
        ws.onmessage = function (e) {
            var jsondata = e.data.substr(32,e.data.length);
            var jdata = JSON.parse(jsondata);
            var data = jdata.data;
            var depth = data.depth;
            //console.log(depth);
            if(data.lp == "okex"){
                for (var ask in depth) {
                    console.log(ask)
                    if (depth.hasOwnProperty(ask)) {
                        changeStockEntry(ask, asks[ask], depth[ask]);
                        //asks[ask] = depth[ask];
                    }
                }
            }

        };
    }

    updataUI();

    $(".btn-primary").click(function() {
        if (isClose) {
            ws = new WebSocket("ws://localhost:8181");
        }
        updataUI();
    });
    $(".btn-danger").click(function() {
        ws.close();
    });

    ws.onclose = function (e) {
        console.log("Connection closed", e);
        isClose = true;
    };
   

    </script>
</body>
</html>